var _v;
var vueModel = {
    el: '.main',
    data: {
        showLogin: false,
        cityShow: false,
        cityList: [],
        cityName: '',
        cityId: '',

        params: {
            date_start: '',
            date_end: '',
            order_type: '',
            direction: '',
            price: {max: '', min: ''},
            city_id: '',
            key_words: '',
            star: [],
            limit: 10,
            page: 1
        },
        hotel_id: '',
        hotelDetail: {
            images: {
                list: [
                    {
                        imgid: ''
                    }, {
                        imgid: ''
                    }, {
                        imgid: ''
                    }, {
                        imgid: ''
                    }, {
                        imgid: ''
                    }
                ]
            },
            facility_ids: '',
            focus: '',
            services: '',
        },
        showRoom: false,
        roomNum: 1,

        all_room: [],
        deserve: [],
        showMore: false,
        dayPrice: {},
        isLogin: true,
        showLogin: false,
        key_words: ''
    },
    methods: {
        getArea: function () {
            HQ.getArea2(function(data) {
                _v.cityList = data;
            })
        },
        getQueryVariable: function (variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        },
        fetchData: function () {
            HQ.ajax("/hotel/info", JSON.stringify({
                hotel_id: _v.hotel_id
            }), function(res){
                if (res.code === 0) {
                    _v.hotelDetail = res.data;
                    if (_v.hotelDetail.images && _v.hotelDetail.images.list && _v.hotelDetail.images.list.length < 5) {
                        for (var i = 0; i < 5 - _v.hotelDetail.images.list.length; i++) {
                            _v.hotelDetail.images.list.push({
                                imgid: ''
                            })
                        }
                    }
                }
            }, function(data){

            }, "POST");
        },
        getRoom: function () {
            HQ.ajax("/room/list_with_price", JSON.stringify({
                hotel_id: _v.hotel_id,
                room_num: _v.roomNum,
                date_start: _v.params.date_start,
                date_end: _v.params.date_end,
            }), function(res){
                if (res.code === 0) {
                    _v.deserve = res.data.deserve;
                    _v.all_room = res.data.all_room;
                    if (_v.all_room) {
                        for (k in _v.all_room) {
                            _v.all_room[k].forEach(function(p) {
                                _v.$set(p, 'showPrice', false);

                            })
                        }
                    }
                    if (_v.deserve) {
                            _v.deserve.forEach(function(p) {
                                _v.$set(p, 'showPrice', false);

                            })
                    }
                }
            }, function(data){
                if (data.code === 5091 || data.code === 5092 || data.code === 5093 || data.code === 5094 || data.code === 5095 || data.code === 500) {
                    _v.isLogin = false;
                }
            }, "POST");
        },
        closePriceTips: function() {
            for (k in _v.all_room) {
                _v.all_room[k].forEach(function(p) {
                    p.showPrice = false;
                })
            }
        },
        getDayPrice: function (item) {
            if (item.showPrice) {
                item.showPrice = false;
                return;
            }
            _v.closePriceTips();
            HQ.ajax("/room/price/info", JSON.stringify({
                room_id: item.room_id,
                room_number: _v.roomNum,
                date_start: _v.params.date_start,
                date_end: _v.params.date_end,
            }), function(res){
                if (res.code === 0) {
                    _v.dayPrice = res.data;
                    item.showPrice = true;
                    //_v.$set(item, 'showPrice', true);
                }
            }, function(){}, "POST");
        },
        initDatePicker: function () {
            //日期
            var language = 'zh-CN'

            var date = "";
            var dateFormat ="";
            if (language == 'zh-CN'){
                dateFormat = "yy-mm-dd";
            }else{
                dateFormat = "M-dd-yy";
            }
            var max_date = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000);
            var zhou_week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
            var week = ["日", "一", "二", "三", "四", "五", "六"];
            var month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
            var from = $("#from").datepicker({
                dateFormat : dateFormat,
                dayNames : zhou_week,
                altField: "#from_week",
                altFormat : "DD",
                minDate : new Date(),
                maxDate : max_date,
                to : "to",
                numberOfMonths: 2,
                dayNamesMin: week,
                monthNames: month,
                monthNamesShort: month,
                showAnim : "",
                onSelect : function(selectedDate){
                    selectedDate = format_date_en(selectedDate);
                    var time = selectedDate.split("-");
                    var time1 = [];
                    $("#to").datepicker( "option", "minDate", selectedDate);
                    time1[0] = time[0];
                    time1[1] = time[1] - 1;
                    time1[2] = time[2];
                    if(time[1] == 12){
                        time[0] = parseInt(time[0])+1;
                        time[1] = 0;
                        if(time[2] == 31){
                            time1[2] = 1;
                            time1[1] = 0;
                            time1[0] = time[0];
                        }else{
                            time1[2] = parseInt(time[2]) + 1;
                        }
                    }else{
                        time1[2] = parseInt(time[2]) + 1;
                    }
                    if(time[2] > 28){
                        time[2] = 28;
                    }
                    $("#from").css({color : "#333"});
                    $("#to").css({color : "#333"});

                    if (language == 'zh-CN'){
                        $("#to").val(time1[0] +"-"+ (parseInt(time1[1])+1) +"-"+ time1[2]);
                    }else{
                        $("#to").val(config.monthShort[parseInt(time1[1])] +"-"+ time1[2] +"-"+ time1[0]);
                    }
                    $("#to").datepicker( "option", "minDate", new Date(time1[0], time1[1], time1[2]));
                    $("#to").datepicker( "option", "maxDate", new Date(time[0], time[1], time[2]));
                    setTimeout(function(){
                        to.datepicker("show");
                        _v.params.date_start = $('#from').val();
                    }, 10);
                }
            });
            var min_de_date = new Date($("#from").val());
            var min_de_month = min_de_date.getMonth();
            var min_de_year = min_de_date.getFullYear();
            var max_de_month = parseInt(min_de_month) + 1;
            var max_de_year = min_de_year;
            if (max_de_month == 13) {
                max_de_year = parseInt(min_de_year) + 1;
            }
            var max_de_date = new Date(max_de_year, max_de_month, min_de_date.getDate());
            var to = $("#to").datepicker({
                dateFormat : dateFormat,
                dayNames : zhou_week,
                altField: "#to_week",
                altFormat : "DD",
                minDate : min_de_date,
                maxDate : max_de_date,
                from : "from",
                dateMouse : true,
                numberOfMonths: 2,
                dayNamesMin: week,
                monthNames: month,
                showAnim : "",
                monthNamesShort: month,
                onSelect: function() {
                    _v.params.date_end = $('#to').val();
                    console.log(_v.params.date_end)
                }
            });
            from.datepicker('setDate', _v.params.date_start)
            to.datepicker('setDate', _v.params.date_end)
        },
        search: function() {
            if (this.cityId) {
                if (!$('#from').val() || !$('#to').val()) {
                    this.$message({
                        type: 'error',
                        msg: '请选择日期'
                    })
                    return;
                }
                location.href = '/list.html?'+ 'city_id='+ this.cityId + '&key_words=' + '&date_start='+ $('#from').val() + '&date_end='+ $('#to').val()
            } else {
                this.getRoom();
            }
        }
    },
    mounted: function () {
        _v = this;
        _v.hotel_id = _v.getQueryVariable('hotel_id') || '';
        _v.params.date_start = _v.getQueryVariable('date_start') || '';
        _v.params.date_end = _v.getQueryVariable('date_end') || '';
        _v.getArea();
        _v.initDatePicker();
        _v.getRoom();
        _v.fetchData();

        if (!!localStorage.getItem('_token')) {
            var nickname = JSON.parse(localStorage.getItem('_token') || '{}').nick_name;
            $('.nickname-box').find('.nickname').show().text(nickname);
            $('.login-reg-box').hide();
            $('.member-center-btn').show();
        } else {
            $('.login-reg-box').show();
            $('.nickname-box').hide();
            $('.member-center-btn').hide();
        }

        $('.list-logout-btn').click(function () {
            HQ.ajax("/logout/", {}, function (data) {
                if (data.code === 0) {
                    localStorage.removeItem('_token')
                    location.href = '/';
                } else {
                }
            }, function () {
            }, "POST");
        })

        $('#J_nav_menu_login').click(function () {
            _v.showLogin = true;
        })
    }
}

$(function() {
    new Vue(vueModel);
})